<!-- !+tabs -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/react.js"></script>
    <script src="js/browser.min.js"></script>
    <script src="js/react-dom.js"></script>
</head>
<body>
    <div id="example"></div>

    <script type="text/babel">
        var A = React.createClass({
            handleChange:function(){
                //将输入框的值 通过 子与父通讯的方式 传递父组件
                // ①获取值
                var tmpValue = this.refs.myInput.value;

                console.log("输入框中的值是"+tmpValue);
                // ②调用属性传来的方法
                this.props.funcSave(tmpValue);
                
            },
            render:function(){
                return <input 
                ref="myInput"
                onChange={this.handleChange}
                type='text' placeholder='plz input'/>
            }
        });

        var B = React.createClass({
            handleClick:function(){
                //希望读取属性myMsg对应的值
                console.log(this.props.myMsg)
                
            },
            render:function(){
                return <button 
                onClick={this.handleClick}>
                    clickMe
                </button>
            }
        });

        var Main = React.createClass({
            //初始化状态
            getInitialState:function(){
                return {
                    info:""
                }
            },
            save:function(msg){
                //msg就是子组件A 在input进行输入时 给传递来的值
                console.log("在Main组件获取A组件最新的值是"+msg);
                //写状态/修改状态
                this.setState({info:msg})
            },
            
            render:function(){
                return <div>
                 <A funcSave={this.save}></A>
                 <B myMsg={this.state.info}></B>
                </div>
            }
        });

        ReactDOM.render(
            <Main></Main>,
            document.getElementById('example')
        );
    </script>
</body>
</html>